<template>
<div class="my-reports abs full">
	<div class="rel full overflow-x-hidden">
		<div class="my-reports-head">今天生成<span class="reported-num" v-text="dayTimes"></span>个，还有<span class="has-reports-num" v-text="otherTimes"></span>次机会</div>
		<div class="rel show-amount"><span class="all-look-3day">3天内随便看</span>
			<div class="abs show-more" @click="showMoreContent()"><span class="square" :class="showMore?'show-more-selected':'show-more-noselected'"></span><span class="show-more-font">展示更多</span></div>
		</div>
		<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore" :bottomPullText="'上拉加载更多'" :bottomLoadingText="'加载中..'" :bottomDropText="'释放加载'">
			<search-result v-for="item in myReportsList" :key="item.name" :detail="item.insurance" :type="'report'" @click.native="goDetail(item)"></search-result>
		</mt-loadmore>
		<div v-if="myReportsList.length==0" class="none-info">没有报告~</div>
	</div>
</div>
</template>

<script>
import SearchResult from '../../components/search-result/search-result.vue'
export default {
	name: 'my-reports',
	components: {
		SearchResult
	},
	data() {
		return {
			allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉
			dayTimes: '', //今天生成报告次数
			otherTimes: '', //还有几次生成报告机会
			showMore: false, //展示更多flag
			pageStart: 1,
			myReportsList: []
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.myReports = this;
	},
	activated() {
		document.title = '我的报告';
		this.postMyReports();
	},
	deactivated() {
		this.allLoaded = false;
		this.dayTimes = '';
		this.otherTimes = '';
		this.pageStart = 1;
		this.showMore = false;
		this.myReportsList = [];
	},
	methods: {
		// 点击列表项跳转：三天内跳到评价报告页面，三天外跳转到生成报告页面
		goDetail(item) {
			let id = item.insurance.ID;
			if (item.isValid) {
				this.$router.push('/report?id=' + id);
			} else {
				this.$router.push('/pre-report?id=' + id);
			}
		},
		// 上拉加载更多
		loadBottom: function() {
			this.pageStart++;
			if (this.showMore) {
				this.postMyReports('n', this.pageStart);
			} else {
				this.postMyReports('y', this.pageStart);
			}
			this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
		},
		// 展示更多
		showMoreContent: function() {
			this.showMore = !this.showMore;
			this.pageStart = 1;
			this.allLoaded = false;
			if (this.showMore) {
				this.myReportsList = [];
				this.postMyReports('n');
			} else {
				this.myReportsList = [];
				this.postMyReports();
			}
		},
		// 我的报告list
		postMyReports(effectiveType = 'y', pageStart = 1) {
			// 获取用户ID
			let customerId = this.$util.getCustomerId();
			if (!customerId) {
				return;
			}
			var that = this;
			this.$util.ajax(`/report/list/my`, 'post', {
				customerId: customerId,
				effectiveType: effectiveType, //展示更多，‘n’为三天以外，‘y’为三天以内
				pageSize: 10,
				pageStart: pageStart
			}, 'loading').then(function(data) {
				console.log('我的报告');
				console.log(data);
				if (data.code == "100000") {
					that.dayTimes = data.data.dayTimes; //今天查看了多少次
					that.otherTimes = data.data.otherTimes; //还剩多少次
					data.data.list.length < 3 ? that.allLoaded = true : ''; //数据量小于pageSize,不能执行上拉加载更多操作
					data.data.list.forEach(function(item) {
						if (item.insurance) {
							that.myReportsList = that.myReportsList.concat(item);
						}
					});
				}
			}).catch(function(err) {
				console.log(err);
			});
		}
	}
}
</script>

<style scoped>
.my-reports {
	background: url(../detail/image/star_bg.png) no-repeat;
	background-size: 100%;
}

.my-reports-head {
	background: url(./image/my-reports-head-bg.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	font-size: .35rem;
	height: 1.4rem;
	line-height: 1.4rem;
	text-align: center;
	color: #FBFBFC;
}

.my-reports-head .reported-num,
.my-reports-head .has-reports-num {
	color: #7EFD95
}

.show-amount {
	font-size: .25rem;
	color: #B5CFFF;
	margin: .3rem 0;
	box-sizing: border-box;
	padding: 0 .35rem;
}

.show-more {
	right: .35rem;
	top: 0;
	color: #FFE373
}

.show-more-selected {
	background: url(./image/square-full.png) no-repeat;
	background-size: 100% 100%;
}

.show-more-noselected {
	background: url(./image/square.png) no-repeat;
	background-size: 100% auto;
}

.show-more .square {
	display: inline-block;
	vertical-align: text-bottom;
	width: .3rem;
	height: .3rem;
	margin-right: .1rem;
}

.result-item:last-child {
	margin-bottom: 1rem
}

.none-info {
	text-align: center;
	margin-top: 34%;
	font-size: .8rem;
	color: #FBFBFC;
}
</style>
